<script setup>
import { reactive,ref,getCurrentInstance } from 'vue'
import { getUserWallet,getByTypeCode } from '../../http/api'

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const { proxy } = getCurrentInstance()
const { $t } = proxy;
// 用户信息对象
let userInfo = ref(undefined)
// 获取用户钱包信息
const getUserWalletFn = async()=>{
    let res = await getUserWallet()
    console.log(res,'res进去了49')
    if(res.code === 200){
        userInfo.value.balance = res.result.balance
    }
}
// 判断用户是否登录
let userInfos = localStorage.getItem('userInfo')
if (userInfos) {
    userInfo.value = JSON.parse(userInfos)
    getUserWalletFn()
}
//子组件登录返回事件
const loginEmit = (res) => {
    userInfo.value = res
    getUserWalletFn()
}
let isDark = ref(true)
if(localStorage.getItem('isDark') !== undefined){
    isDark.value = localStorage.getItem('isDark') === 'true' ? true : false
}
// 获取图片路径资源
const getImageUrl = (name) => {
    return new URL(`../../assets/img/home/${name}`, import.meta.url).href
}
// 获取图片路径资源
const getImageUrl2 = (name) => {
    return new URL(`../../assets/img/workPrin/${name}`, import.meta.url).href
}
// 子组件返回的切换主题颜色
const changeIsDarkEmit = (val) => {
    isDark.value = val
}
let textData = ref('')
// 获取页面文章内容
const getByTypeCodeFn = ()=>{
    let obj = {
        typeCode:"HOW_IT_WORKS",
    }
    getByTypeCode(obj).then(res=>{
        console.log(res,'文章返回---')
        if(res.success){
            textData.value = res.result.content
        }
    })
}
getByTypeCodeFn()
</script>
<template>
    <div class="homeBody"  :style="{ background: isDark ? `url(${getImageUrl('bg.png')})` : `url(${getImageUrl('bg2.png')})` }">
        <headNavigation :userInfo="userInfo"      @changeIsDarkEmit="changeIsDarkEmit"  :isDark="isDark"    @loginEmit="loginEmit"></headNavigation>
        <div class="modelTop">
            <div class="nowEggPng">
                <div class="nowEggPngDiv top16">
                    <div class="jiantoubox">
                        <div :style="{ color: isDark ? '#fff' : '#282828' }">{{$t('msg.message.howRun')}}</div>
                        <img class="jiantou" :src="isDark ? getImageUrl('whitejiantou.png') : getImageUrl('blackjiantou.png')" alt="">
                    </div>
                </div>
                <img :src="getImageUrl('title.png')" alt="">
            </div>
        </div>
        <div class="qustionBox">
            <div class="qustionList">
                <!-- <div class="questionItem" :style="{'border-bottom': 'unset','background-color':isDark?'#282B29':'#f1f1f1'}">
                    <div :style="{color:isDark?'#fff':'#000'}"></div>
                    <img :src="isDark ? getImageUrl('changeSmall.png') : getImageUrl2('add.png')" alt="">
                </div> -->
                <div class="questionDetail" v-html="textData" :style="{'text-align':'center',color:isDark?'#fff':'#000',border: '1px solid #fff',background:isDark?'#000':'#fff'}">
                    
                </div>
            </div>
            <!-- <div class="qustionList">
                <div class="questionItem" :style="{'background-color':isDark?'#282B29':'#f1f1f1'}">
                    <div :style="{color:isDark?'#fff':'#000'}">2. 用积分（Jems）充值您的帐户</div>
                    <img :src="isDark ? getImageUrl('changeBig.png') : getImageUrl2('close.png')" alt="">
                </div>
            </div>
            <div class="qustionList">
                <div class="questionItem" :style="{'background-color':isDark?'#282B29':'#f1f1f1'}">
                    <div :style="{color:isDark?'#fff':'#000'}">3. 购买并打开你的神秘盒子</div>
                    <img :src="isDark ? getImageUrl('changeBig.png') : getImageUrl2('close.png')" alt="">
                </div>
            </div>
            <div class="qustionList">
                <div class="questionItem" :style="{'background-color':isDark?'#282B29':'#f1f1f1'}">
                    <div :style="{color:isDark?'#fff':'#000'}">4. 收到您喜欢的产品</div>
                    <img :src="isDark ? getImageUrl('changeBig.png') : getImageUrl2('close.png')" alt="">
                </div>
            </div> -->
            
        </div>
    </div>
</template>
<style scoped>
.questionDetail >>> .bubble{
    width: 60% !important;
}
.questionDetail >>> .w-60{
    /* width: 120px; */
    font-size: 18px;
    height: 50px;
    /* border: 1px solid; */
}
.modelTop{
    padding-top: 20px;
}
.homeBody {
    overflow-x: hidden;
    max-width: 2560px;
    min-width: 1200px;
    /* height: 100vh; */
    /* padding-bottom: 50px; */
    overflow-y: auto;
    /* background-color: #0F123F; */
    background: url('../../assets/img/home/bg.png');
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    padding-top: 101px;
    padding-bottom: 50px;
    margin: 0 auto;
}
.qustionBox {
    color: #fff;
    margin: 0 240px;
    padding-top: 20px;
    max-width: 2560px;
}

.qustionList {
    margin-bottom: 25px;
}

.questionItem {
    justify-content: space-between;
    background: #282B29;
    height: 108px;
    display: flex;
    align-items: center;
    padding: 0 30px 0 48px;
    border: 1px solid #fff;
}

.questionItem div {
    font-size: 30px;
}

.questionItem img {
    width: 22px;
    cursor: pointer;
}

.questionDetail {
    color: #fff;
    font-size: 24px;
    /* height: 108px; */
    background: #0F0F0F;
    display: flex;
    padding: 20px;
    padding-top: 15px !important;
    /* align-content: center; */
    align-items: center;
    flex-direction: column;
    padding: 104px 137px;
    justify-content: space-between;
}
.questionDetail div {
    background: #D9D9D9;
    width: 488px;
    height: 313px;

}

.nowEggPng{
    position: relative;
    /* width: 356px; */
    display: flex;
    /* width: 100%; */
    margin-left: 240px;
    flex-direction: column;
    font-size: 44px;
}
.nowEggPng img {
    width:97px;
}
.jiantoubox{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.jiantou{
    margin-left: 15px;
    width: 100px !important;
}
.realTime{
    font-size: 18px;
    color: #fff !important;
    padding-left: 2px;
}
.nowEggPngDiv{
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 76px;
    font-size: 40px;
    top: 14px;
}
@media screen and (max-width:1600px) {
.nowEggPng{
    margin-left: 60px;
}
.qustionBox{
    margin: 0 60px;
}
}
</style>